<template>
  <div class="child">
    子组件(哥哥)
    <div>父亲给儿子的东西:{{ car }}</div>
    <div>父亲给儿子的玩具:{{ toy }}</div>
    <button @click="emit('send-water', '生命之泉')">给父亲</button>
    <button @click="sendToBrother">给弟弟</button>
  </div>
</template>

<script setup lang="ts" name="Childs">
import { onMounted } from "vue";
import emitter from "../../../../utils/emitter";
interface propsOption {
  car?: string;
  toy: string;
}
withDefaults(defineProps<propsOption>(), {
  car: "默认东西",
});

const emit = defineEmits(["send-water"]);
// 触发事件
const sendToBrother = () => {
  emitter.emit("send-toy", "乐高");
};

onMounted(() => {
  setTimeout(() => {
    emit("send-water", "生命之水");
  }, 1000);
});
</script>

<style scoped lang="scss">
.child {
  background-color: pink;
  padding: 10px;
}
</style>
